<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>23.使用jQ选择器完成注册页面表单校验</title>
		<style>
			a{
				text-decoration: none;	/*没有下划线*/
			}
			
			label.error{
				background:url(../img/unchecked.gif) no-repeat 10px 3px;/* no-repeat:不能被拉伸 */
				padding-left: 30px;
				font-family:georgia;	/*字体*/
				font-size: 15px;
				font-style: normal;
				color: red;
			}
			
			label.success{
				background:url(../img/checked.gif) no-repeat 10px 3px;
				padding-left: 30px;
			}
		</style>
		
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="../js/jquery.validate.min.js" ></script><!--引入validate插件js文件-->
		<script type="text/javascript" src="../js/messages_zh.js" ></script><!--引入国际化js文件-->
		
		<script>
			$(function(){
				$("#registForm").validate({
					rules:{
						user:{
							required:true,
							minlength:3
						},
						password:{
							required:true,
							digits:true,
							minlength:6
						},
						repassword:{
							required:true,
							digits:true,
							minlength:6,
							equalTo:"[name='password']"
						},
						email:{
							required:true,
							email:"email"	//这儿也可以写:true
						},
						username:{
							required:true,
							maxlength:5
						},
						sex:{
							required:true
						}
					},
					messages:{
						user:{
							required:"用户名不能为空!",
							minlength:"用户名不得少于3位!"
						},
						password:{
							required:"密码不能为空!",
							digits:"密码必须是整数!",
							minlength:"密码不得少于6位!"
						},
						repassword:{
							required:"确认密码不能为空!",
							digits:"密码必须是整数!",
							minlength:"密码不得少于6位!",
							equalTo:"两次输入密码不一致!"
						},
						email:{
							required:"邮箱不能为空!",
							email:"邮箱格式不正确!"
						},
						username:{
							required:"姓名不能为空!",
							maxlength:"姓名不得多于5位!"
						},
						sex:{
							required:"性别必须勾选!"
						}
					},
					errorElement: "label", 	//用来创建错误提示信息标签,validate插件默认的就是label
					success: function(label) { //验证成功后的执行的回调函数
						//label指向上面那个错误提示信息标签label
						label.text(" ") //清空错误提示消息
							.addClass("success"); //加上自定义的success类
					}
				});
			});
		</script>
	</head>
	
	<body>
		<form action="#" method="get" id="registForm">
			<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px">
				<tr>
					<td colspan="2" >
						<font size="5">会员注册</font>
					</td>
				</tr>
				<tr>
					<td width="180px">用户名</td>
					<td>
						<em style="color: red;">*</em>
						<input type="text" name="user" size="35px"/>
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td>
						<em style="color: red;">*</em>
						<input type="password"  name="password" size="35px"/>
					</td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td>
						<em style="color: red;">*</em>
						<input type="password" name="repassword" size="35px"/>
					</td>
				</tr>
				<tr>
					<td>Email</td>
					<td>
						<em style="color: red;">*</em>
						<input type="text" name="email" size="35px"/>
					</td>
				</tr>
				<tr>
					<td>姓名</td>
					<td>
						<em style="color: red;">*</em>
						<input type="text" name="username" size="35px"/>
					</td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<span style="margin-right: 155px;">
							<em style="color: red;">*</em>
							<input type="radio" name="sex" value="1"/>男
							<input type="radio" name="sex" value="2"/>女
							<label for="sex" class="error" style="display: none;"></label>
						</span>
					</td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td>
						<em style="color: red;">*</em>
						<input type="text" name="birthday"  size="35px"/>
					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<em style="color: red;">*</em>
						<input type="text" name="yanzhengma" />
						<img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注      册" height="50px"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
	
	<!--------------------------------------------------------1-------------------------------------------------------->
	<!--------------------------------------------------------1-------------------------------------------------------->
	<!--------------------------------------------------------1-------------------------------------------------------->
	<!--------------------------------------------------------1-------------------------------------------------------->
	<!--------------------------------------------------------1-------------------------------------------------------->
	
	<xmp>
		<head>
			<meta charset="UTF-8">
			<title>23.使用jQ选择器完成注册页面表单校验</title>
			<style>
				a{
					text-decoration: none;	/*没有下划线*/
				}
				
				label.error{
					background:url(../img/unchecked.gif) no-repeat 10px 3px;/* no-repeat:不能被拉伸 */
					padding-left: 30px;
					font-family:georgia;	/*字体*/
					font-size: 15px;
					font-style: normal;
					color: red;
				}
				
				label.success{
					background:url(../img/checked.gif) no-repeat 10px 3px;
					padding-left: 30px;
				}
			</style>
			
			<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
			<script type="text/javascript" src="../js/jquery.validate.min.js" ></script><!--引入validate插件js文件-->
			<script type="text/javascript" src="../js/messages_zh.js" ></script><!--引入国际化js文件-->
			
			<script>
				$(function(){
					$("#registForm").validate({
						rules:{
							user:{
								required:true,
								minlength:3
							},
							password:{
								required:true,
								digits:true,
								minlength:6
							},
							repassword:{
								required:true,
								digits:true,
								minlength:6,
								equalTo:"[name='password']"
							},
							email:{
								required:true,
								email:"email"	//这儿也可以写:true
							},
							username:{
								required:true,
								maxlength:5
							},
							sex:{
								required:true
							}
						},
						messages:{
							user:{
								required:"用户名不能为空!",
								minlength:"用户名不得少于3位!"
							},
							password:{
								required:"密码不能为空!",
								digits:"密码必须是整数!",
								minlength:"密码不得少于6位!"
							},
							repassword:{
								required:"确认密码不能为空!",
								digits:"密码必须是整数!",
								minlength:"密码不得少于6位!",
								equalTo:"两次输入密码不一致!"
							},
							email:{
								required:"邮箱不能为空!",
								email:"邮箱格式不正确!"
							},
							username:{
								required:"姓名不能为空!",
								maxlength:"姓名不得多于5位!"
							},
							sex:{
								required:"性别必须勾选!"
							}
						},
						errorElement: "label", 	//用来创建错误提示信息标签,validate插件默认的就是label
						success: function(label) { //验证成功后的执行的回调函数
							//label指向上面那个错误提示信息标签label
							label.text(" ") //清空错误提示消息
								.addClass("success"); //加上自定义的success类
						}
					});
				});
			</script>
		</head>
		
		<body>
			<form action="#" method="get" id="registForm">
				<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px">
					<tr>
						<td colspan="2" >
							<font size="5">会员注册</font>
						</td>
					</tr>
					<tr>
						<td width="180px">用户名</td>
						<td>
							<em style="color: red;">*</em>
							<input type="text" name="user" size="35px"/>
						</td>
					</tr>
					<tr>
						<td>密码</td>
						<td>
							<em style="color: red;">*</em>
							<input type="password"  name="password" size="35px"/>
						</td>
					</tr>
					<tr>
						<td>确认密码</td>
						<td>
							<em style="color: red;">*</em>
							<input type="password" name="repassword" size="35px"/>
						</td>
					</tr>
					<tr>
						<td>Email</td>
						<td>
							<em style="color: red;">*</em>
							<input type="text" name="email" size="35px"/>
						</td>
					</tr>
					<tr>
						<td>姓名</td>
						<td>
							<em style="color: red;">*</em>
							<input type="text" name="username" size="35px"/>
						</td>
					</tr>
					<tr>
						<td>性别</td>
						<td>
							<span style="margin-right: 155px;">
								<em style="color: red;">*</em>
								<input type="radio" name="sex" value="1"/>男
								<input type="radio" name="sex" value="2"/>女
								<label for="sex" class="error" style="display: none;"></label>
							</span>
						</td>
					</tr>
					<tr>
						<td>出生日期</td>
						<td>
							<em style="color: red;">*</em>
							<input type="text" name="birthday"  size="35px"/>
						</td>
					</tr>
					<tr>
						<td>验证码</td>
						<td>
							<em style="color: red;">*</em>
							<input type="text" name="yanzhengma" />
							<img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="submit" value="注      册" height="50px"/>
						</td>
					</tr>
				</table>
			</form>
		</body>
	</xmp>
</html>
